{template 'header'}
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<style>
    html,body{
        height:100%;
    }
    .content{
        background-color:#fff;
        margin-top:58px;
        padding:0 0.16rem;
        padding-bottom:0.6rem;
    }
    .content .balance{
        color:#000;
        font-size: 0.24rem;
        height:0.64rem;
        line-height: 0.64rem;
    }
    .content .pieChart{
        height:4.3rem;
        border-radius: 5px;
        box-shadow: 1px 2px 6px #c4d2ee,
                    -1px 1px 6px #c4d2ee;
    }
    .content .store{
        /*height:1.5rem;*/
        border-radius: 5px;
        box-shadow: 1px 2px 6px #c4d2ee,
                    -1px 1px 6px #c4d2ee;
        overflow: hidden;
        font-size:0.22rem;
        color:#999;
    }
    .content .store a{
        display: inline-block;
        width:100%;
        height:0.2rem;
        background: url("../../addons/mx_shop/resources/cgc/images/bills1.png") no-repeat center;
        background-size: 0.24rem 0.16rem;
    }
    .content .store ul{
        height:75px;
        overflow: hidden;
        margin:0.2rem 0.26rem 0 0.26rem;
        padding-bottom:6px;
        border-bottom:2px solid #f5f5f5;
    }
    .content .store ul li{
        padding:2px 0;
    }
    .content .store .total{
        margin-left:1.06rem;
    }
    .content .store .price{
        float:right;
    }
    .content .rank{
        /*height:1.82rem;*/
        border-radius: 5px;
        box-shadow: 1px 2px 6px #c4d2ee,
        -1px 1px 6px #c4d2ee;
        overflow: hidden;
        font-size:0.22rem;
        color:#999;
    }
    .content .rank a{
        display: inline-block;
        width:100%;
        height:0.2rem;
        background: url("../../addons/mx_shop/resources/cgc/images/bills1.png") no-repeat center;
        background-size: 0.24rem 0.16rem;
    }
    .content .rank ul{
        height:75px;
        overflow: hidden;
        /*overflow: hidden;*/
        margin:0.2rem 0.26rem 0 0.26rem;
        padding-bottom:6px;
        border-bottom:2px solid #f5f5f5;
    }
    .content .rank ul li{
        padding:2px 0;
    }
    .content .rank .num{
        color:red;
    }
    .content .rank .num_name{
        margin-left:1.06rem;
    }
    .content .rank .num_price{
        float:right;
    }
    .content .other{
        /*height:1.82rem;*/
        border-radius: 5px;
        box-shadow: 1px 2px 6px #c4d2ee,
        -1px 1px 6px #c4d2ee;
        overflow: hidden;
        font-size:0.22rem;
        color:#999;
    }
    .content .other ul{
        margin:0.16rem 0.26rem 0 0.26rem;
        padding-bottom:6px;
        border-bottom:2px solid #f5f5f5;
    }
    .content .other ul li{
        padding:2px 0;
    }
    .content .other .other_price{
        color:red;
        float:right;
    }
</style>
<body id="body">
    <header class="mui-bar mui-bar-nav" style="background: #72adf5;">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <h1 class="mui-title" id="title" style="color: white;">账单</h1>
    </header>
    <div class="content" id="content">
        <!--饼图部分-->
        <p class="balance">
            余额组成
        </p>
        <div class="pieChart">

        </div>
        <p class="balance">
            最常关顾门店
        </p>
        <div class="store">
            <ul>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
                <li>
                    <span class="name">南方医科大学附属</span>
                    <span class="total">26次</span>
                    <span class="price">1500.00</span>
                </li>
            </ul>
            <a></a>
        </div>
        <p class="balance">
            仪器体验排行榜
        </p>
        <div class="rank">
            <ul>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
                <li>
                    <span class="num">NO.1</span>
                    <span class="num_name">南方医科大学附属</span>
                    <span class="num_price">1500.00</span>
                </li>
            </ul>
            <a></a>
        </div>
        <p class="balance">
            其他收益
        </p>
        <div class="other">
            <ul>
                <li>
                    <span class="income">订单推荐</span>
                    <span class="other_price">+40</span>
                </li>
                <li>
                    <span class="income">消费返现</span>
                    <span class="other_price">+40</span>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/echarts.min.js"></script>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementsByClassName('pieChart')[0]);
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    show: false,
                    orient:'vertical',
                    x:"left",
                    data:['100-可用余额','220-充值','80-冻结余额']
                },
                graphic:{
                    type:'text',
                    left:'center',
                    top:'center',
                    style:{
                        text:'+400',
                        textAlign:'center',
                        fill:'#fe8175',
                        fontSize:'36'
                    }
                },
                laberLine:{
                    normal: {
                        length: 20,
                        length2: 50,
                        lineStyle: {
                            color: '#333'
                        }
                    }
                },
                color:['#ffce57', '#79b2ff','#ff8278'],
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '47%'],
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 50
                            }

                        },
                        label:{
                            normal:{
//                                show:true,
//                                // position:"center",
//                                formatter:function (val) {
//                                    return val.name.split("-").join("\n");
//                                },
//                                textStyle:{
//                                    fontSize: '12',
//                                    color: '#969696'
//                                }
                                formatter: '{a|{d}%}\n{b|{b}}',
                                borderWidth: 0,
                                borderRadius: 4,
                                // shadowBlur:3,
                                // shadowOffsetX: 2,
                                // shadowOffsetY: 2,
                                // shadowColor: '#999',
                                padding: [0, -50],
                                rich: {
                                    a: {
                                        fontSize: 12,
                                        lineHeight: 16,
                                        padding:20
                                    },
                                    // abg: {
                                    //     backgroundColor: '#333',
                                    //     width: '100%',
                                    //     align: 'right',
                                    //     height: 22,
                                    //     borderRadius: [4, 4, 0, 0]
                                    // },
                                    hr: {
                                        borderColor: '#333',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 12,
                                        lineHeight: 16,
                                        color: '#333',
                                    }
                                    // per: {
                                    //     color: '#333',
                                    //     padding: [2, 4],
                                    //     borderRadius: 2
                                    // }
                                }
                            }
                        },
                        data:[
                            {value:100, name:'可用余额'},
                            {value:220, name:'充值金额'},
                            {value:80, name:'冻结余额'}
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            var flag = true;
            $("a").click(function () {
                if(flag == true){
                    $(this).css({
                        "transform":"rotate(180deg)"
                    }).prev().css({
                        "height":"auto",
                        "overflow":"visible"
                    });
                    flag = false;
                }else if(flag == false){
                    $(this).css({
                        "transform":"rotate(0deg)"
                    }).prev().css({
                        "height":"75px",
                        "overflow":"hidden"
                    });
                    flag = true;
                }

            });
        });
    </script>
</body>